<template>
    <!-- template必须要有一个根元素 -->
    <div class="login-container">
        <div class="left">
            <div class="title-box">
                <img src="@/assets/img/layout_icon.png" alt="" />
                <span class="title">黑马面面</span>
                <span class="line"></span>
                <span class="sub-title">用户登录</span>
            </div>
            <!-- 插入element数据 -->
            <!--
        model：绑定的模型值，该模型中的属性值，要跟我们的业务结合起来
        rules: 校验规则
        ref：将来拿到表单做校验
       -->
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                class="login-form"
            >
                <!-- prop:将来坐晓燕和清空的时候用的着，并且它的名字要跟model和rule的属性名一致 -->
                <el-form-item prop="phone">
                    <el-input
                        v-model="ruleForm.phone"
                        placeholder="请输入手机号码"
                        prefix-icon="el-icon-user"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        v-model="ruleForm.password"
                        placeholder="请输入密码"
                        prefix-icon="el-icon-lock"
                        show-password
                    ></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="16">
                        <el-form-item prop="code">
                            <el-input
                                v-model="ruleForm.code"
                                placeholder="请输入密码"
                                prefix-icon="el-icon-key"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <img
                            @click="changeCodeURL"
                            style="width: 100%; height: 40px"
                            :src="loginCodeURL"
                            alt=""
                        />
                    </el-col>
                </el-row>
                <el-form-item prop="checked">
                    <el-checkbox v-model="ruleForm.checked"></el-checkbox>&nbsp;
                    我已阅读并同意
                    <el-link
                        type="primary"
                        target="_blank"
                        href="http://www.itcast.cn"
                    >
                        用户协议</el-link
                    >和
                    <el-link
                        type="primary"
                        target="_blank"
                        href="http://www.itcast.cn"
                        >隐私条款</el-link
                    >
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login" style="width: 100%"
                        >登录</el-button
                    >
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100%" @click='register'
                        >注册</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <div class="right">
            <img src="@/assets/img/login_bg.png" alt="" />
        </div>
        <register ref="registerRef"></register>
    </div>
</template>

<script>
import { setToken } from "@/utils/token.js";
import Register from "./Register";
export default {
    //挂载子组件
    components: {
        Register,
    },
    data() {
        return {
            loginCodeURL: `${process.env.VUE_APP_BASEURL}/captcha?type=login`,
            ruleForm: {
                phone: "18511111111", //手机号码
                password: "12345678", //密码
                code: "", //验证码
                checked: false, // 是否勾选
            },
            rules: {
                phone: [
                    {
                        // validator 是校验器

                        validator: (rule, value, callback) => {
                            // rule 检验对象、value 输入的值 callback 校验成功还是失败的【一定要调用】
                            if (!value) {
                                return callback(new Error("手机号码不能为空"));
                            }
                            const reg = /^1[3-9][0-9]{9}$/;
                            if (!reg.test(value)) {
                                return callback(new Error("手机号码不合法"));
                            }
                            callback();
                        },

                        // 校验成功不需要加任何参数，但是一定要调用
                        trigger: "blur", //触发时机
                    },
                ],
                password: [
                    {
                        required: true, //非空
                        message: "请输入密码", //提示
                        trigger: "blur", //触发时机
                    },
                    {
                        min: 6, //最小多少位
                        max: 16, //最大多少位
                        message: "长度在 6 到 16 个字符",
                        trigger: "blur",
                    },
                ],
                code: [
                    {
                        required: true,
                        message: "验证码不能空",
                        trigger: "blur",
                    },
                ],
                checked: [
                    {
                        validator: (rule, value, callback) => {
                            value
                                ? callback()
                                : callback(new Error("必须勾选用户协议"));
                        },
                        trigger: "change", // 触发时机
                    },
                ],
            },
        };
    },
    methods: {
        changeCodeURL() {
            // 网络请求的缓存：GET + 地址不变
            console.log(process.env.VUE_APP_BASEURL);
            this.loginCodeURL = `${
                process.env.VUE_APP_BASEURL
            }/captcha?type=login&t=${new Date() - 0}`;
        },
        login() {
            this.$refs.ruleForm.validate(async (valid) => {
                console.log(valid);
                if (!valid) return;

                // // 使用axios发请求
                // this.$axios.post("/login", this.ruleForm).then((res) => {
                //     console.log(res);

                //     if (res.data.code === 200) {
                //         this.$message.success("登录成功~");

                //         // 保存token
                //         localStorage.setItem(
                //             "heimamm62_token",
                //             res.data.data.token
                //         );

                //         // 跳转到layout页面
                //         this.$router.push("/layout");
                //     } else {
                //         this.$message.error(res.data.message);

                //         // 重新获取验证码
                //         this.changeCodeURL();
                //     }
                // });

                const res = await this.$axios.post("/login", this.ruleForm);
                console.log(res);
                if (res.code == 200) {
                    this.$message.success("登录成功");
                    //    保存token
                    setToken(res.data.token);

                    //调转页面
                    this.$router.push("/layout");
                } else {
                    this.$message.error(res.message);

                    //刷新验证码
                    this.changeCodeURL();
                }
            });
        },
        //给注册设置点事件
        register(){
            this.$refs.registerRef.dialogVisible = true;
        }
        
    },
};
</script>

<style lang="less">
.login-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: linear-gradient(225deg, #1493fa, #01c6fa);
    .left {
        width: 478px;
        height: 550px;
        background: #f5f5f5;
        padding: 48px;
        .title-box {
            display: flex;
            align-items: center;
            img {
                width: 22px;
                height: 17px;
                margin-right: 16px;
            }
            .title {
                font-size: 24px;
                margin-right: 14px;
            }
            .line {
                width: 1px;
                background-color: #c7c7c7;
                height: 27px;
                margin-right: 12px;
            }
            .sub-title {
                font-size: 22px;
            }
        }
        .login-form {
            margin-top: 29px;
        }
    }
}
</style>